<!DOCTYPE html>
<html style="height:100%">
<head>
    <title></title>
    <% include ../../layouts/import.ejs %>
</head>
<body style="height:100%">
<% include ../../layouts/header.ejs %>
<% include ../../layouts/processHeader.ejs %>
<!--导航栏对应的详情-->
<input type="hidden" id="designId" value="<%= designId %>">
<input type="hidden" id="designProfile" value="<%= designProfile %>">
<input type="hidden" id="designDetailed" value="<%= designDetailed %>">
<div class=" height " style="background: #F8F6F2;">
    <div class="container">
        <div class="panel panel-default" style="margin-top: 20px;">
            <div class="person-panel-heading">
                <div class="pull-left person-new">
                    <span class="glyphicon glyphicon-user"></span>
                    <span>设计文档管理</span>
                </div>
                <div class="clearfix"></div>
            </div>
            <table class="table table-bordered table-hover table-striped table-condensed person-refence">
                <thead>
                <tr>
                    <th width=5% class="align-center">编号</th>
                    <th width=15% class="align-center">文件类型</th>
                    <th width=15% class="align-center">文件内容</th>
                    <th width=15% class="align-center">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="align-center">1</td>
                    <td class="align-center">项目概要设计书</td>
                    <td class="align-center" id="design_content_profile"></td>
                    <td class="align-center">
                        <a href="javascript:void(0)" data-design-id="1" id="profileUpload" class="select-file">选择文件</a>
                        <a href="javascript:void(0)" id="ctlBtnProfile" style="margin-left:10px"
                           class="btn btn-default btn-xs btn-del person-delete">开始上传</a>
                    </td>
                </tr>
                <tr>
                    <td class="align-center">2</td>
                    <td class="align-center">项目详细设计书</td>
                    <td class="align-center" id="design_content_detailed"></td>
                    <td class="align-center">
                        <a href="javascript:void(0)" data-design-id="2" id="detailedUpload" class="select-file">选择文件</a>
                        <a href="javascript:void(0)" id="ctlBtnDetailed" style="margin-left:10px"
                           class="btn btn-default btn-xs btn-del person-delete">开始上传</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<% include ../../layouts/footer.ejs %>
</body>

<script>
    $(function () {
        $("#design").addClass("click-change");
        var btnProfile = $('#ctlBtnProfile');// 上传文件id
        var stateProfile = 'pending';
        var profileUpload = WebUploader.create({

            // swf文件路径
            swf: '../../../punlic/lib/webuploader-0.1.5/Uploader.swf',

            // 文件接收服务端。
            server: '/operationFile/uploadFile',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#profileUpload',

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,

            //允许上传文件总数
            fileNumLimit:1
        });

        // 当有文件被添加进队列的时候
        profileUpload.on('fileQueued', function (file) {
            $("#design_content_profile").append('<div id="' + file.id + '" class="item">' +
                '<div class="info">' + file.name + '</div>' +
                '<p class="state">等待上传...</p>' +
                '<p class="state deleteQueue" >X</p>' +
                '</div>');

            $(".deleteQueue").click(function () {
                var fileId = $(this).parent("div").attr("id");
                profileUpload.removeFile(fileId);
                $(this).parent("div").remove()
            })
        });


        profileUpload.on('uploadSuccess', function (file, response) {
            $('#' + file.id).find('p.' + 'state').text('已上传');
            var designId = $("#designId").val();
            var designProfile = $("#designProfile").val();
            var designDetailed = $("#designDetailed").val();
            var uploadId = response.data ? response.data.id : '';
            $.post('/process/design/save', {
                designId: designId,
                designProfile: designProfile,
                designDetailed: designDetailed,
                uploadId: uploadId,
                designType: 1
            }, function (result) {
                console.log(1111)
                console.log(result)
                if (result.errcode == 0) {
                    var data = result.data;
                    if (data.designType == "1") {
                        $("#designProfile").val(data.profile);
                        location.reload();
                    }
                } else {
                    console.log(result.message)
                }
            })
        });



        profileUpload.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });

        profileUpload.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });

        profileUpload.on('all', function (type) {
            if (type === 'startUpload') {
                stateProfile = 'uploading';
            } else if (type === 'stopUpload') {
                stateProfile = 'paused';
            } else if (type === 'uploadFinished') {
                stateProfile = 'done';
            }
            if (stateProfile === 'uploading') {
                btnProfile.text('暂停上传');
            } else {
                btnProfile.text('开始上传');
            }
        });

        btnProfile.on('click', function () {
            if (stateProfile === 'uploading') {
                profileUpload.stop();
            } else {
                profileUpload.upload();
            }
        });


        //详细设计上传
        var btnDetailed = $('#ctlBtnDetailed');
        var stateDetailed = 'pending';
        var uploaderDetailed = WebUploader.create({

            // swf文件路径
            swf: '../../../punlic/lib/webuploader-0.1.5/Uploader.swf',

            // 文件接收服务端。
            server: '/operationFile/uploadFile',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#detailedUpload',

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,

            //允许上传文件总数
            fileNumLimit:1
        });

        // 当有文件被添加进队列的时候
        uploaderDetailed.on('fileQueued', function (file) {
            $("#design_content_detailed").append('<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '<p class="state deleteQueue">X</p>' +
                '</div>');
            $(".deleteQueue").click(function () {
                var fileId = $(this).parent("div").attr("id");
                profileUpload.removeFile(fileId);
                $(this).parent("div").remove()
            })
        });


        uploaderDetailed.on('uploadSuccess', function (file, response) {
            $('#' + file.id).find('p.' + 'state').text('已上传');
            var designId = $("#designId").val();
            var designProfile = $("#designProfile").val();
            var designDetailed = $("#designDetailed").val();
            var uploadId = response.data ? response.data.id : '';
            $.post('/process/design/save', {
                designId: designId,
                designProfile: designProfile,
                designDetailed: designDetailed,
                uploadId: uploadId,
                designType: 2
            }, function (result) {
                console.log(result)
                if (result.errcode === 0) {
                    var data = result.data;
                    if (data.designType === 2) {
                        $("#designDetailed").val(data.detailed);
                    }
                } else {
                    console.log(result.message)
                }
            })
        });

        uploaderDetailed.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });

        uploaderDetailed.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });

        uploaderDetailed.on('all', function (type) {
            if (type === 'startUpload') {
                stateDetailed = 'uploading';
            } else if (type === 'stopUpload') {
                stateDetailed = 'paused';
            } else if (type === 'uploadFinished') {
                stateDetailed = 'done';
            }
            if (stateDetailed === 'uploading') {
                btnDetailed.text('暂停上传');
            } else {
                btnDetailed.text('开始上传');
            }
        });

        btnDetailed.on('click', function () {
            if (stateDetailed === 'uploading') {
                uploaderDetailed.stop();
            } else {
                uploaderDetailed.upload();
            }
        });


    })


    var designProfileId = $("#designProfile").val();
    var designDetailedId = $("#designDetailed").val();
    console.log(designProfileId)
    getUploadbyDesign(designProfileId,'design_content_profile')
    getUploadbyDesign(designDetailedId,'design_content_detailed')
    function getUploadbyDesign(uploadId,divId) {
        console.log(uploadId)
        $.getJSON('/operationFile/files', {
            uploadIdStr: uploadId
        }, function (result) {
            if (result.errcode == 0){
                var html = '';
                $.each(result.data,function (index, element) {
                    html += '<div id="' + element.id + '" class="item">' +
                        '<h4 class="info"><span class="download">' + element.original_name + '</span></h4>' +
                        '<span class="deleteFile">X</span>'
                        // '<p class="state">等待上传...</p>' +
                        '</div>'
                });
                $("#" + divId).append(html);
                $(".download").click(function () {
                    console.log(111)
                    var id = $(this).parent().parent("div").attr("id");
                    window.open('/operationFile/downloadFile/' + id);
                })
                $(".deleteFile").click(function () {
                    console.log(111)
                    var id = $(this).parent("div").attr("id");
                    $.getJSON('/operationFile/deleteFile/' + id, function (result) {
                        if (result.errcode == 0){
                            location.reload();
                        }
                    })
                })
            }else {
                console.log(result.message)
            }

        })
    }

</script>
</html>